import React from 'react'
import styled from 'styled-components'
import classNames from 'classnames'

const StyledWrap = styled.div`
	display: flex;
	position: relative;
	margin-bottom: 20px;
	min-height: 30px;
	align-items: center;
	.label {
		display: flex;
		width: 100px;
		margin-right: 5px;
		align-items: center;
	}
	.content {
		display: flex;
		align-items: center;
		flex: 1;
	}
`

interface LabelWrapProps {
	label?: string
	className?: string
	children?: React.ReactNode
	show?: boolean | 0 | 1
	tips?: React.ReactNode
}

export default function LabelWrap(props: LabelWrapProps) {
	const { label = '', children, className, show = true, tips, ...restProps } = props

	const wrapCls = classNames(
		{
			'line-wrap': true,
		},
		className
	)
	return (
		<>
			{!!show ? (
				<StyledWrap className={wrapCls} {...restProps}>
					<div className="label">
						<span>{label}</span>
						{tips}
					</div>
					<div className="content">{children}</div>
				</StyledWrap>
			) : (
				<></>
			)}
		</>
	)
}
